<template>
    <el-menu
      class="el-menu-vertical-demo"
      @select="handleSelect"
      default-active="1"
      router
    >
      <el-menu-item index="/admin/user-management">
        <i class="el-icon-user"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/category-management">
        <i class="el-icon-menu"></i>
        <span slot="title">分类管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/post-management">
        <i class="el-icon-document"></i>
        <span slot="title">帖子管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/resource-management">
        <i class="el-icon-folder"></i>
        <span slot="title">资源管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/message-management">
        <i class="el-icon-message"></i>
        <span slot="title">留言管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/system-monitoring">
        <i class="el-icon-monitor"></i>
        <span slot="title">系统监控</span>
      </el-menu-item>
    </el-menu>
  </template>

  <script lang="ts" setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const handleSelect = (key: string) => {
    router.push(key)
  }
  </script>

  <style scoped>
  .el-menu-vertical-demo {
    width: 200px;
  }
  </style>